<template>
  <div class="contain">
    <el-form>
      <el-form-item>
        <el-button type="primary" @click="addOrUpdateHandle()">
          <i class="el-icon-plus"></i>
          <span>新增</span>
        </el-button>
      </el-form-item>
    </el-form>
    <el-table row-key="categoryId" :data="tableData" border style="width: 100%" :tree-props="{ children: 'children' }">
      <el-table-column prop="categoryName" align="center" label="分类名称" width="150">
      </el-table-column>
      <el-table-column prop="pic" align="center" label="图片" width="244">
        <template slot-scope="scope">
          <img :src="imgQ + scope.row.pic" alt="" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="状态" width="243">
        <template slot-scope="scope">
          <el-tag v-show="scope.row.status == 1" size="small">正常</el-tag>
          <el-tag v-show="scope.row.status == 0" type="danger">下线</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序号" width="243">
        <template slot-scope="scope">
          <span>{{ scope.row.seq }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="">
        <template slot-scope="scope">
          <el-button type="primary" @click="() => update(scope.$index, scope.row)">
            <span>修改</span>
          </el-button>
          <el-button type="danger" @click="del(scope.$index, scope.row)">
            <span>删除</span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>


    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></add-or-update>
  </div>
</template>

<script>
import AddOrUpdate from "./category-add-or-update.vue"
import { Debounce } from "@/utils/debounce";
// import { idList } from "@utils/index"
// import { idListFromTree } from "@utils/index"
import { treeDataTranslate } from "@/utils/index"

export default {
  components: {
    AddOrUpdate,
  },
  data() {
    return {
      tableData: [],
      imgQ: "http://admin.yami.byesame.com/apis/mall4j/img/",
      addOrUpdateVisible: false,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true;
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id);
      });
    },
    // 修改
    update(index, row) {
      // console.log(index,row);
      this.addOrUpdateHandle(row.categoryId);
    },
    del(index, row) {
      console.log(index, row);
      let e = row.categoryId;
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete("apis/prod/category/" + e).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    getList: Debounce(function () {
      this.tableData = []
      this.$http.get("apis/prod/category/table").then((res) => {
        // console.log(res.data);
        let list = treeDataTranslate(res.data, "categoryId")
        // console.log(list);
        this.tableData = list
      });
    }),
  },
};
</script>

<style scoped>
.contain img {
  height: 80px;
  width: 200px;
}
</style>